<template>
    <div class="uiIndex">
        <div class="header">
            <div class="header-left" :style="'width:'+(ui.isCollapse?64:200).toString()+'px'"></div>
            <div class="topBar">
                <div class="header-title">

                    <el-button type="text" @click="ui.isCollapse=!ui.isCollapse">
                        <i class="fa fa-outdent"></i>
                    </el-button>
                </div>
                <div class="header-center"></div>
                <div class="header-right">
                    <div class="items">
                        <div class="item user">
                            <i class="fa fa-user-circle-o"></i> 张志国
                        </div>
                        <div class="item">
                            <el-button type="text">
                                <i class="fa fa-power-off"></i> 退出系统
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="slider bg01" :style="'width:'+(ui.isCollapse?64:200).toString()+'px'">
            <div class="logo">
                <img class="logoImg" :src="ui.imgLogo" alt="">
                <div class="title" v-show="!ui.isCollapse">视频资源管理</div>
            </div>
            <div class="menus">

                <el-menu
                :collapse="ui.isCollapse"
                :router = "true"
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#4c81eb"
                text-color="#fff"
                active-text-color="#f0f0f0">

                <el-menu-item index="/uiIndex/home">
                    <i class="fa fa-home r0"></i>
                    <span slot="title">主页</span>
                </el-menu-item>
                    <el-menu-item index="/uiIndex/heat">
                        <i class="fa fa-star r0"></i>
                        <span slot="title">关注</span>
                    </el-menu-item>
                    <el-menu-item index="/uiIndex/tag">
                        <i class="fa fa-tags r0"></i>
                        <span slot="title">标签</span>
                    </el-menu-item>
                    <el-submenu index="cate">
                        <template slot="title">
                        <i class="fa fa-cubes r0"></i>
                        <span>分类</span>
                        </template>
                        <el-menu-item
                            v-for = "(cate , index) in cates"
                            :v-key = "index"
                            :index="'/uiIndex/cate?cateId='+cate.cateCode"
                        >
                            {{cate.cateName}}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>

            </div>
        </div>

        <div class="mainPage" :style="'padding-left:'+(ui.isCollapse?64:200).toString()+'px'">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      ui: {
        imgLogo: require('../assets/imgs/icons/logo.jpg'),
        isCollapse: false
      },
      cates: [
        { cateId: 1, cateName: '电影', cateCode: 'c01' },
        { cateId: 2, cateName: '电视剧', cateCode: 'c02' },
        { cateId: 3, cateName: '科技', cateCode: 'c03' },
        { cateId: 4, cateName: '军事', cateCode: 'c04' },
        { cateId: 5, cateName: '体育', cateCode: 'c05' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
    .uiIndex{
        .tx0{
            color: #070801
        }
        .tx1{
            color: #373d45
        }
        .tx2{
            color: #757b82
        }
        .border{
            color: #e2e3e5
        }
        .bg0{
            background-color: #f5f5f5
        }
        .bg1{
            background-color: #4c81eb
        }
        .bg2{
            background-color: #13ab62
        }
        .bg3{
            background-color: #f2a626
        }
        .bg4{
            background-color: #f33f3f
        }
    }

    ::v-deep .el-menu {
        border:0;
        i{
            color: #fff
        }
    }
    ::v-deep .el-menu-item {
        i{
            color: #fff
        }
    }
    ::v-deep  .el-menu li.el-menu-item{
        i{
             color: #fff
        }
    }
    .r0 {
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
    }
    .uiIndex{
        .header{
            position: fixed;
            width: 100%;
            height: 56px;
            display: flex;
            background-color: #fff;
            z-index: 990;
            .header-left{

            }
            .topBar{
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .header-title{
                    font-weight: bold;
                    padding: 0 10px;
                }
                .header-right{
                    .items{
                        display: flex;
                        align-items: center;
                        .item{
                            padding: 0 10px;
                        }
                    }
                }
            }
        }

        .slider{
            position: fixed;
            z-index: 999;
            width: 200px;
            height: 100%;
            background-color: #4c81eb;
            color: #fff;

            display: flex;
            flex-direction: column;

            .logo{
                display: flex;
                height: 56px;
                align-items: center;
                background-color: #16439b;
                padding-left: 17px;
                .logoImg{
                    height: 30px;
                    width: 30px;
                    border-radius: 50%;

                }
                .title{
                    font-weight: bold;
                    font-size: 1.1em;
                    padding-left: 10px;
                }
            }

            .menus{
                flex: 1
            }

        }

        .mainPage{
            padding-top: 56px
        }
    }
</style>
